<template>
  <!-- 大屏的左中右布局配置 -->
  <div class="layout-view">
    <!-- 基础左中右布局 -->
    <div class="layout-view-left">
      <div v-if="leftboxmessage[0]" class="hasdata-view">
        <!-- 左侧框展示组件 -->
        <div v-for="(leftitem,leftindex) in leftboxmessage" :key="leftindex" class="hasdata-view-box" :style="{'height':leftitem.assemblyHeight + '%'}">
          <iframeshowComponentsVue :boxmessage="leftitem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'left')"></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'left')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode !== 'topBottomColumns'&&layoutCode !== 'upFlipperdownContent'" class="layout-view-center">
      <div
        v-if="centerboxmessage[0]"
        class="hasdata-view"
      >
        <!-- 中间展示组件 -->
        <div v-for="(centeritem,centerindex) in centerboxmessage" :key="centerindex" class="hasdata-view-box" :style="{'height':centeritem.assemblyHeight + '%'}">
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'middle')"></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'middle')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode === 'upFlipperdownContent'" class="layout-view-center">
      <div
        v-if="centerboxmessage[0]"
        class="hasdata-view"
      >
        <!-- 中间展示组件 -->
        <div v-for="(centeritem,centerindex) in centerboxmessage" :key="centerindex" class="hasdata-view-box" :style="{'height':centeritem.assemblyHeight + '%'}">
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'middleTopBottom')"></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'middleTopBottom')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div v-if="layoutCode === 'topBottomColumns'" class="layout-view-center">
      <div
        v-if="centerboxmessage[0] && layoutCode === 'topBottomColumns'"
        class="hasdata-view hasdata-view-middleTopBottom hasdata-view-middleTop"
      >
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in centerboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'middleTop')"></div>

      </div>
      <div
        v-if="centerboxmessage.length === 0"
        class="nolayout-data nolayout-data-middleTopBottom nolayout-data-middleTop"
        @click="setdiaview(1, 'middleTop')"
      >
        <i class="el-icon-plus zhicon"></i>
      </div>
      <div
        v-if="middleBottomboxmessage[0]"
        class="hasdata-view hasdata-view-middleTopBottom hasdata-view-middleBottom"
      >
        <!-- 中间展示组件 -->
        <div
          v-for="(centeritem, centerindex) in middleBottomboxmessage"
          :key="centerindex"
          class="hasdata-view-box"
          :style="{ height: centeritem.assemblyHeight + '%' }"
        >
          <iframeshowComponentsVue :boxmessage="centeritem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'middleBottom')"></div>
      </div>
      <div
        v-if="middleBottomboxmessage.length === 0"
        class="nolayout-data nolayout-data-middleTopBottom nolayout-data-middleBottom"
        @click="setdiaview(1, 'middleBottom')"
      >
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <div class="layout-view-right">
      <div
        v-if="rightboxmessage[0]"
        class="hasdata-view"
      >
        <!-- 右侧框展示组件 -->
        <div v-for="(rightitem,rightindex) in rightboxmessage" :key="rightindex" class="hasdata-view-box" :style="{'height':rightitem.assemblyHeight + '%'}">
          <iframeshowComponentsVue :boxmessage="rightitem" />
        </div>
        <div class="hasdata-view-box-edit" @click="setdiaview(1, 'right')"></div>
      </div>
      <div v-else class="nolayout-data" @click="setdiaview(1, 'right')">
        <i class="el-icon-plus zhicon"></i>
      </div>
    </div>
    <!-- 组件添加弹框 -->
    <div v-if="diastau === 1" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">布局的业务组件添加</div>
        <div class="line-close" @click="setdiaview(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in addboxcomsList"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">组件编码</div>
            <div class="inputline-valuetwo">{{ compnentsList[item.componentsindex].assemblyCode }}</div>
            <!-- <input v-model="item.assemblyId" class="inputline-value" /> -->
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">宽度占比</div>
            <input v-model="item.assemblyLong" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">高度占比</div>
            <input v-model="item.assemblyHeight" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">logo选择</div>
            <input
              type="file"
              class="inputline-value"
              accept="image/*"
              @change="getFile($event,index)"
            />
          </div>
          <div class="components-line">
            <div class="slect-name">边框样式</div>
            <select v-model="item.frame" class="selcect-one">
              <option
                v-for="(comitem, comindex) in frameList"
                :key="comindex+'frame'"
                :value="comitem.id"
              >
                <div v-if="comitem"> {{ comitem.name }}</div>
              </option>
            </select>
          </div>
          <div class="components-line">
            <div class="slect-name">数据源</div>
            <select v-model="item.dataSources" class="selcect-one">
              <option
                v-for="(comitem, comindex) in dataSourcesList"
                :key="comindex+'dataSources'"
                :value="comitem.id"
              >
                <div v-if="comitem"> {{ comitem.name }}</div>
              </option>
            </select>
          </div>
          <!-- 可以选择的业务组件 -->
          <div class="components-line">
            <div class="slect-name">组件选择</div>
            <select v-model="item.componentsindex" class="selcect-one">
              <option
                v-for="(comitem, comindex) in compnentsList"
                :key="comindex"
                :value="comindex"
              >
                {{ comitem.assemblyName }}({{ comitem.assemblyCode }})
              </option>
            </select>
          </div>
          <div class="addline-but">
            <div class="addline-but1" @click="delcomponentsmet(index)">
              删除此业务组件
            </div>
            <div class="addline-but2" @click="showbasecomponents(true,comitem)">业务组件预览</div>
          </div>
        </div>
      </div>
      <div class="bottom-bar">
        <div class="bottom-bar-cancel" @click="addcomponentsmet()">
          增加组件
        </div>
        <div class="bottom-bar-confirm" @click="saveview()">确认保存</div>
      </div>
    </div>
    <!-- 业务组件修改弹框=可修改名字高度占比宽度等外部数据，不涉及基础组件 -->
    <div v-if="diastau === 2" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">布局的业务组件修改</div>
        <div class="line-close" @click="setdiaview(0)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          v-for="(item, index) in editboxcomsList"
          :key="index"
          class="dia-main-addline"
        >
          <div class="dia-main-inputline">
            <div class="inputline-name">组件编码</div>
            <div class="inputline-valuetwo">{{ compnentsList[item.componentsindex].assemblyCode }}</div>
            <!-- <input v-model="item.assemblyId" class="inputline-value" /> -->
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">宽度占比</div>
            <input v-model="item.assemblyLong" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">高度占比</div>
            <input v-model="item.assemblyHeight" type="number" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">logo选择</div>
            <input
              type="file"
              class="inputline-value"
              accept="image/*"
              @change="getFile($event,index)"
            />
          </div>
          <div class="components-line">
            <div class="slect-name">边框样式</div>
            <select v-model="item.frame" class="selcect-one">
              <option
                v-for="(comitem, comindex) in frameList"
                :key="comindex+'frame'"
                :value="comitem.id"
              >
                <div v-if="comitem"> {{ comitem.name }}</div>
              </option>
            </select>
          </div>
          <div class="components-line">
            <div class="slect-name">数据源</div>
            <select v-model="item.dataSources" class="selcect-one">
              <option
                v-for="(comitem, comindex) in dataSourcesList"
                :key="comindex+'dataSources'"
                :value="comitem.id"
              >
                <div v-if="comitem"> {{ comitem.name }}</div>
              </option>
            </select>
          </div>
          <!-- 可以选择的业务组件 -->
          <div class="components-line">
            <div class="slect-name">组件选择</div>
            <select v-model="item.componentsindex" class="selcect-one">
              <option
                v-for="(comitem, comindex) in compnentsList"
                :key="comindex"
                :value="comindex"
              >
                <div v-if="comitem"> {{ comitem.assemblyName }}({{ comitem.assemblyCode }})</div>
              </option>
            </select>
          </div>
          <div class="addline-but">
            <div class="addline-but2" @click="editcomponentsmet(index)">
              确认修改
            </div>
            <div class="addline-but1" @click="zhdelcomponentsmet(index)">
              删除此业务组件
            </div>
            <div class="addline-but2" @click="showbasecomponents(true,comitem)">业务组件预览</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 业务组件展示弹框 -->
    <div v-if="isshowkuang" class="add-components-dia">
      <div class="top-bar"></div>
      <div class="top-title-line">
        <div class="line-title">业务组件展示</div>
        <div class="line-close" @click="showbasecomponents(false)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="screen-dia-main">
        <div
          class="showkuang-one"
          :style="{ height: nowkuangmesHeight + 'px' }"
        >
          <div class="kuangone-main">
            <iframeshowComponentsVue :boxmessage="nowkuangmes" />
          </div>
        </div>
      </div>
    </div>
    <!-- 选择文件挂件-用完关掉 -->
    <input
      v-if="isshowuploadpic"
      ref="zhfileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="getFile"
    />
  </div>
</template>

<script>
import iframeshowComponentsVue from "./iframeshowComponents.vue";
import axios from 'axios';
export default {
  name: "Layone",
  components: { iframeshowComponentsVue },
  props: {
    // 当前导航栏状态
    selectStau: {
      type: String,
      default: () => ''
    },
    // 当前导航栏index
    navindex: {
      type: Number,
      default: () => {
        return -1
      }
    }
  },
  data() {
    return {
      isshowuploadpic: false,
      // 处理过的框内数据
      leftboxmessage: [],
      // 未处理的框内数据
      leftboxmessageone: [],
      centerboxmessage: [],
      centerboxmessageone: [],
      rightboxmessage: [],
      rightboxmessageone: [],
      // 特殊的上下结构的组件
      middleBottomboxmessageone: [],
      middleBottomboxmessage: [],
      // 当前要添加到盒子中的组件-替换原盒子信息
      addboxcomsList: [],
      // 信息修改相关
      editboxcomsList: [],
      // 调用哪个弹窗
      diastau: 0,
      // 选择了哪个位置
      nowselctedview: "",
      // 添加的组件
      compnentsList: [],
      // 是否展示业务组件
      isshowkuang: false,
      // 先来个最复杂的布局
      nowkuangmes: {
        titleMes: {
          name: "基地简介",
          titleImg: "bar1-1-1.png",
          titleDes: "JJ Lin"
        },
        assemblyLong: 100,
        assemblyHeight: 36,
        frame: '',
        assemblyCode: 'K1',
        cockpitAssemblyContentList: [
          [
            {
              // cockpitAssemblyCode: "CGY8iNzhP0",
              showType: "A1",
              height: 100,
              dataSources: 1,
              unitCode: "unitCode1",
              width: 100
            }
          ]
        ]
      },
      // 当前导航栏信息
      cockpitNavigationList: [],
      // 默认框高200px，若有数据可以从后端调用获得占用百分比，通过id拿到当前位置高度，进行计算拿到最适合的高度
      nowkuangmesHeight: 400,
      // 布局不同中间的前缀也不同
      layoutCodeList: [{
        name: 'threeColumns', list: [{ name: '左上角', id: 'middle' }]
      },
      {
        name: 'fourBottomColumns', list: [{ name: '左下角', id: 'middleLeft' }, { name: '右下角', id: 'middleRight' }]
      },
      {
        name: 'threeColumns', list: [{ name: '左上角', id: 'middle' }]
      }
      ],
      frameList: [
        { name: '边框1', id: 'title-box' },
        { name: '边框2', id: 'title-box-right' },
        { name: '边框3', id: 'border-title-two' },
        { name: '边框4', id: 'border-title-top-bot-green' },
        { name: '边框5', id: 'border-title-top-bot-greentwo' },
        { name: '边框6', id: 'border-title-top-bot-greenthree' },
        { name: '边框7', id: 'border-title-top-bot-greenfour' },
        { name: '边框8', id: 'border-title-top-bot-greenfive' },
        { name: '边框9', id: 'border-title-radus-right' },
        { name: '边框10', id: 'border-title-radus-left' },
        { name: '边框11', id: 'border-title-left' },
        { name: '边框12', id: 'border-title-left-two' },
        { name: '边框13', id: 'border-title-left-light-black' },
        { name: '边框14', id: 'border-title-left-bluetwo' },
        { name: '边框15', id: 'border-title-left-bluesix' },
        { name: '边框16', id: 'border-title-left-bluefive' },
        { name: '边框17', id: 'border-title-left-blue' },
        { name: '边框18', id: 'border-title-center-two' },
        { name: '边框19', id: 'border-title-center-three' },
        { name: '边框20', id: 'border-title-center-green' },
        { name: '边框21', id: 'border-title-center-four' },
        { name: '边框22', id: 'border-title-center-black' },
        { name: '边框23', id: 'border-black-only' }
      ],
      layoutCode: "",
      layout: "middle",
      dataSourcesList: [{
        name: '固定数据', id: 1
      },
      {
        name: '动态数据', id: 0
      }
      ]
    };
  },
  watch: {
    navindex: {
      handler(newval) {
        this.$message.success("选择导航栏成功！")
        this.leftboxmessage = []
        this.centerboxmessage = []
        this.middleBottomboxmessage = [];
        this.rightboxmessage = []
        this.gettemplemes()
      },
      immediate: true,
      deep: true
    }
    // layoutCode: {
    //   handler(newData) {
    //     if (newData && newData === "upFlipperdownContent") {
    //       this.layout = "middleTopBottom";
    //     } else if (newData && newData === "topBottomColumns") {
    //       this.layout = "middleTop";
    //     } else if (newData) {
    //       this.layout = "middel";
    //     }
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  mounted() {
    this.getcomponentsMesList();
    // this.gettemplemes();
  },
  methods: {
    // 获取布局中展示框中数据
    getboxmesMet() {
      if (this.layoutCode && this.layoutCode === "upFlipperdownContent") {
        this.layout = "middleTopBottom";
      } else if (this.layoutCode && this.layoutCode === "topBottomColumns") {
        this.layout = "middleTop";
      } else if (this.layoutCode) {
        this.layout = "middel";
      }
      this.getleftboxmesMet()
      this.getcenterboxmesMet()
      this.getrightboxmesMet()
    },
    // 1.获取左侧的业务组件布局
    getleftboxmesMet() {
      // 处理过的数据
      this.leftboxmessage = []
      // 未处理的后端数据
      this.leftboxmessageone = []
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/queryInfoByLayout'
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: 'left',
          cockpitNavigationId: this.cockpitNavigationList[this.navindex].cockpitNavigationId
        },
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        }
      }).then(res => {
        if (res.data.code === 1) {
          let meslist = res.data.data || []
          this.leftboxmessageone = meslist
          if (meslist[0]) {
            this.$message.success("左侧业务组件获取成功！")
            let newcomlist = []
            meslist.forEach(
              (itemone, indexone) => {
                let baskuangmes = {
                  titleMes: {
                    name: itemone.cockpitAssemblyName,
                    titleDes: itemone.cockpitAssemblyName
                  },
                  assemblyLong: itemone.assemblyLong,
                  frame: itemone.frame,
                  assemblyHeight: itemone.assemblyHeight,
                  assemblyCode: itemone.assemblyCode,
                  cockpitAssemblyContentList: this.handleboxmes(itemone.cockpitAssemblyContentList)
                }
                if (baskuangmes.cockpitAssemblyContentList && baskuangmes.cockpitAssemblyContentList.length > 0) {
                  baskuangmes.dataSources = baskuangmes.cockpitAssemblyContentList[0]['dataSources']
                }
                newcomlist.push(baskuangmes)
                if (meslist.length - 1 === indexone) {
                  this.leftboxmessage = newcomlist
                }
              }
            )
          }
        }
      })
    },
    // 2.获取中间的业务组件布局
    getcenterboxmesMet() {
      this.centerboxmessage = []
      this.centerboxmessageone = []
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/queryInfoByLayout'
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: this.layout || "middle",
          cockpitNavigationId: this.cockpitNavigationList[this.navindex].cockpitNavigationId
        },
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.$message.success("中间业务组件获取成功！")
          let meslist = res.data.data || []
          this.centerboxmessageone = meslist
          if (meslist[0]) {
            this.$message.success("右侧业务组件获取成功！")
            let newcomlist = []
            meslist.forEach(
              (itemone, indexone) => {
                let baskuangmes = {
                  titleMes: {
                    name: itemone.cockpitAssemblyName,
                    titleDes: itemone.cockpitAssemblyName
                  },
                  assemblyLong: itemone.assemblyLong,
                  frame: itemone.frame,
                  assemblyHeight: itemone.assemblyHeight,
                  assemblyCode: itemone.assemblyCode,
                  cockpitAssemblyContentList: this.handleboxmes(itemone.cockpitAssemblyContentList)
                }
                if (baskuangmes.cockpitAssemblyContentList && baskuangmes.cockpitAssemblyContentList.length > 0) {
                  baskuangmes.dataSources = baskuangmes.cockpitAssemblyContentList[0]['dataSources']
                }
                newcomlist.push(baskuangmes)
                if (meslist.length - 1 === indexone) {
                  this.centerboxmessage = newcomlist
                }
              }
            )
          }
        }
      })
      if (this.layoutCode === "topBottomColumns") {
        this.getmiddleBottomboxmesMet();
      }
    },
    getmiddleBottomboxmesMet() {
      this.middleBottomboxmessageone = [];
      this.middleBottomboxmessage = [];
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/cockpitAssembly/queryInfoByLayout";
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: "middleBottom",
          cockpitNavigationId: this.cockpitNavigationList[this.navindex].cockpitNavigationId
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message.success("中间下方业务组件获取成功！");
          let meslist = res.data.data || [];
          this.middleBottomboxmessageone = meslist;
          if (meslist[0]) {
            let newcomlist = [];
            meslist.forEach((itemone, indexone) => {
              let baskuangmes = {
                titleMes: {
                  name: itemone.cockpitAssemblyName,
                  titleDes: itemone.cockpitAssemblyName
                },
                assemblyLong: itemone.assemblyLong,
                frame: itemone.frame,
                assemblyHeight: itemone.assemblyHeight,
                assemblyCode: itemone.assemblyCode,
                cockpitAssemblyContentList: this.handleboxmes(itemone.cockpitAssemblyContentList)
              }
              if (baskuangmes.cockpitAssemblyContentList && baskuangmes.cockpitAssemblyContentList.length > 0) {
                baskuangmes.dataSources = baskuangmes.cockpitAssemblyContentList[0]['dataSources']
              }
              newcomlist.push(baskuangmes);
              if (meslist.length - 1 === indexone) {
                this.middleBottomboxmessage = newcomlist;
              }
            });
          }
        }
      });
    },
    // 3.获取右边的业务组件布局
    getrightboxmesMet() {
      this.rightboxmessage = []
      // 未处理的后端数据
      this.rightboxmessageone = []
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/queryInfoByLayout'
      axios({
        method: "get",
        url: requrl,
        params: {
          layout: 'right',
          cockpitNavigationId: this.cockpitNavigationList[this.navindex].cockpitNavigationId
        },
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.$message.success("右侧业务组件获取成功！")
          // 调用获取获取框的详细数据并赋值给展示框-可以修改展示平台的左侧框组件
          let meslist = res.data.data || []
          this.rightboxmessageone = meslist
          if (meslist[0]) {
            this.$message.success("右侧业务组件获取成功！")
            let newcomlist = []
            meslist.forEach(
              (itemone, indexone) => {
                let baskuangmes = {
                  titleMes: {
                    name: itemone.cockpitAssemblyName,
                    titleDes: itemone.cockpitAssemblyName
                  },
                  assemblyLong: itemone.assemblyLong,
                  frame: itemone.frame,
                  assemblyHeight: itemone.assemblyHeight,
                  assemblyCode: itemone.assemblyCode,
                  cockpitAssemblyContentList: this.handleboxmes(itemone.cockpitAssemblyContentList)
                }
                if (baskuangmes.cockpitAssemblyContentList && baskuangmes.cockpitAssemblyContentList.length > 0) {
                  baskuangmes.dataSources = baskuangmes.cockpitAssemblyContentList[0]['dataSources']
                }
                newcomlist.push(baskuangmes)
                if (meslist.length - 1 === indexone) {
                  this.rightboxmessage = newcomlist
                }
              }
            )
          }
        }
      })
    },
    // 4.获取业务组件信息进行转化
    handleboxmes(e) {
      // // let testmes = [
      // //   {
      // //     dataSources: 0,
      // //     height: 50,
      // //     showType: "A1",
      // //     unitCode: "testcode1",
      // //     width: 100,
      // //     xAxis: 1,
      // //     yAxis: 1
      // //   }
      // // ]
      // let testmes = e || []
      // let newlist = []
      // if (testmes[0]) {
      //   testmes.forEach(
      //     (item, index) => {
      //       if (item.yAxis === 1) {
      //         if (!newlist[0])newlist.push([])
      //         newlist[0].push({
      //           dataSources: item.dataSources,
      //           height: item.height,
      //           showType: item.showType,
      //           unitCode: item.unitCode,
      //           width: item.width
      //         })
      //       }
      //       if (item.yAxis === 2) {
      //         if (!newlist[1])newlist.push([])
      //         newlist[1].push({
      //           dataSources: item.dataSources,
      //           height: item.height,
      //           showType: item.showType,
      //           unitCode: item.unitCode,
      //           width: item.width
      //         })
      //       }
      //       if (testmes.length - 1 === index) {
      //       // console.log('处理后的数据', newlist)
      //       }
      //     }
      //   )
      // }
      let testmes = e || []
      let newlist = []
      if (testmes && testmes.length > 0) {
        testmes.forEach(a => {
          if (a && a.length > 0) {
            a.forEach(b => {
              newlist.push(b)
            })
          }
        })
      } return newlist
    },
    // 展示组件弹框显示与隐藏
    showbasecomponents(z = false, e) {
      if (e) {
        this.nowkuangmes = e
        console.log('展示业务组件', this.nowkuangmes)
      }
      // 先赋值然后显示弹框
      this.isshowkuang = z
    },
    // 保存组件信息-add
    saveview() {
      // 业务组件详细信息查询接口/cockpitAssembly/query
      let layen = ""
      // 根据选择的不同页面，赋值到对应位置，同时调用接口保存至数据库
      if (this.nowselctedview === "left") {
        layen = "left";
      } else if (this.nowselctedview === "middle") {
        layen = "middle";
      } else if (this.nowselctedview === "right") {
        layen = "right";
      } else if (this.nowselctedview === "middleTop") {
        layen = "middleTop";
      } else if (this.nowselctedview === "middleBottom") {
        layen = "middleBottom";
      } else if (this.nowselctedview === "middleTopBottom") {
        layen = "middleTopBottom";
      }
      // 框内展示信息处理
      this.leftboxmessage = []
      let zhcomslist = []
      this.addboxcomsList.forEach(
        async (item, index) => {
          let navmes = this.cockpitNavigationList[this.navindex]
          let comsmes = this.compnentsList[item.componentsindex]
          let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
          let zhmesone = {
            "assemblyHeight": item.assemblyHeight,
            "assemblyLong": item.assemblyLong,
            frame: item.frame,
            dataSources: item.dataSources,
            "assemblyCode": comsmes.assemblyCode,
            "layout": layen,
            "sort": index,
            "cockpitAssemblyContentDTOList": allcomslist,
            "cockpitNavigationId": navmes.cockpitNavigationId,
            "cockpitAssemblyName": comsmes.assemblyName,
            "cockpitAssemblyEnName": comsmes.assemblyEnName
          }
          zhcomslist.push(zhmesone)
          console.log("处理好的新增数据", zhcomslist)
          // this.leftboxmessage = zhcomslist;
          let baseurl = this.$zhurl
          let requrl = baseurl + '/cockpitAssembly/add'
          let formData = new FormData();
          formData.append('assemblyHeight', zhmesone.assemblyHeight)
          formData.append('assemblyLong', zhmesone.assemblyLong)
          formData.append('frame', zhmesone.frame)
          formData.append('assemblyCode', zhmesone.assemblyCode)
          formData.append('layout', zhmesone.layout)
          formData.append('sort', zhmesone.sort)
          formData.append('cockpitNavigationId', zhmesone.cockpitNavigationId)
          formData.append('cockpitAssemblyName', zhmesone.cockpitAssemblyName)
          formData.append('cockpitAssemblyEnName', zhmesone.cockpitAssemblyEnName)
          if (zhmesone.cockpitAssemblyContentDTOList && zhmesone.cockpitAssemblyContentDTOList !== []) {
            zhmesone.cockpitAssemblyContentDTOList.forEach(
              (itemone, indexone) => {
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].showType`, itemone.showType)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].dataSources`, zhmesone.dataSources)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].unitCode`, itemone.unitCode)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].width`, itemone.width)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].height`, itemone.height)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].xAxis`, itemone.xAxis)
                formData.append(`cockpitAssemblyContentDTOList[${indexone}].yAxis`, itemone.yAxis)
              }
            )
          }
          if (item.icon && item.icon !== '') {
            formData.append('file', item.icon)
          }
          axios({
            method: "POST",
            url: requrl,
            data: formData,
            timeout: 10000,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            if (res.data.code === 1) {
              this.diastau = 0
              this.$message.success("业务组件添加成功！")
              // 调用获取获取框的详细数据并赋值给展示框-可以修改展示平台的左侧框组件
              this.getboxmesMet()
            }
          })
        }
      )
    },
    zhdelcomponentsmet(i) {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/del'
      let editcomsMes = this.editboxcomsList[i]
      let params = {
        cockpitAssemblyId: editcomsMes.cockpitAssemblyId
      }
      axios({
        method: "POST",
        url: requrl,
        data: params,
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        }
      }).then(
        res => {
          if (res.data.code === 1) {
            this.editboxcomsList.splice(i, 1)
            this.$message.success("删除成功！")
            this.getboxmesMet()
          }
        }
      )
    },
    // 修改布局中组件并且调用后端接口
    async editcomponentsmet(i) {
      if (this.editboxcomsList && this.editboxcomsList.length > 0) {
        this.editboxcomsList.forEach((a, index) => {
          if (a) {
            console.log(this.editboxcomsList)
            console.log(a)
            if (a.cockpitAssemblyContentList && a.cockpitAssemblyContentList.length > 0) {
              a.cockpitAssemblyContentList.forEach(async(b) => {
                b.dataSources = a.dataSources
                await this.editAssemblyContent(b)
              })
            }
            let editcomsMes = a
            // let editcomsMes = this.editboxcomsList[i]
            // // let comsmes = this.compnentsList[editcomsMes.componentsindex]
            // // let allcomslist = await this.getcomsallmes(comsmes.assemblyId)
            let params = {
              assemblyHeight: Number(editcomsMes.assemblyHeight),
              assemblyLong: Number(editcomsMes.assemblyLong),
              frame: editcomsMes.frame,
              // cockpitAssemblyContentDTOList: allcomslist,
              cockpitAssemblyId: editcomsMes.cockpitAssemblyId
            }
            let baseurl = this.$zhurl
            let requrl = baseurl + '/cockpitAssembly/edit'
            let formData = new FormData();
            formData.append('assemblyHeight', params.assemblyHeight)
            formData.append('assemblyLong', params.assemblyLong)
            formData.append('frame', params.frame)
            formData.append('cockpitAssemblyId', params.cockpitAssemblyId)
            if (editcomsMes.icon && editcomsMes.icon !== '') {
              formData.append('file', editcomsMes.icon)
            }
            axios({
              method: "POST",
              url: requrl,
              data: formData,
              timeout: 10000,
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then(
              res => {
                if (res.data.code === 1) {
                  this.$message.success("修改成功！")
                  if (index === this.editboxcomsList.length - 1) {
                    this.getboxmesMet()
                  }
                }
              }
            )
          }
        })
      }
    },
    async  editAssemblyContent(data) {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpitAssembly/editAssemblyContent'
      let param = data
      axios({
        method: "POST",
        url: requrl,
        data: param,
        timeout: 10000,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(
        res => {
          if (res.data.code === 1) {
            this.$message.success("修改成功！")
          }
        }
      )
    },
    // 获取组件的详细信息
    getcomsallmes(assemblyId) {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/assembly/query'
      let param = {
        'assemblyId': assemblyId
      }
      return new Promise((resove, reject) => {
        axios({
          method: "GET",
          url: requrl,
          params: param,
          headers: {
            'Content-Type': "application/json;charset=UTF-8"
          }
        }).then(res => {
          if (res.data.data.assemblyContentDTOList) {
            resove(res.data.data.assemblyContentDTOList)
          } else {
            resove([])
          }
        })
      })
    },
    // 弹框展示隐藏方法
    setdiaview(i, pos) {
      this.addboxcomsList = [];
      if (pos) {
        this.nowselctedview = pos;
      }
      if (i === 0) {
        // this.addboxcomsList = []
      }
      if (this.diastau > 0 && i > 0) {
        this.$message.warning("请勿重复点击!");
      } else {
        if (i === 1) {
          if (this.selectStau === 'add') {
            this.diastau = 1
          } else if (this.selectStau === 'edit') {
            this.diastau = 2
            this.editboxcomsList = []
            // 将值辅到修改信息列表
            let editmeslistone = []
            let editmeslisttwo = []
            let editmeslistthree = []
            let editmeslistfour = []
            if (this.nowselctedview === 'left') {
              this.leftboxmessageone.forEach(
                (itemtwo, indextwo) => {
                  let editmestwo = {
                    'cockpitAssemblyId': itemtwo.cockpitAssemblyId,
                    'assemblyLong': itemtwo.assemblyLong,
                    frame: itemtwo.frame,
                    dataSources: itemtwo.dataSources,
                    'assemblyHeight': itemtwo.assemblyHeight,
                    'componentsindex': this.getkuangindex(itemtwo.assemblyCode),
                    cockpitAssemblyContentList: this.handleboxmes(itemtwo.cockpitAssemblyContentList)
                  }
                  if (editmestwo.cockpitAssemblyContentList && editmestwo.cockpitAssemblyContentList.length > 0) {
                    editmestwo.dataSources = editmestwo.cockpitAssemblyContentList[0]['dataSources']
                  }
                  console.log('左侧模板业务组件', itemtwo)
                  editmeslistone.push(editmestwo)
                  if (this.leftboxmessageone.length - 1 === indextwo) {
                    this.editboxcomsList = editmeslistone
                  }
                }
              )
            }
            if (this.nowselctedview === 'right') {
              this.rightboxmessageone.forEach(
                (itemtwo, indextwo) => {
                  let editmestwo = {
                    'cockpitAssemblyId': itemtwo.cockpitAssemblyId,
                    'assemblyLong': itemtwo.assemblyLong,
                    frame: itemtwo.frame,
                    dataSources: itemtwo.dataSources,
                    'assemblyHeight': itemtwo.assemblyHeight,
                    'componentsindex': this.getkuangindex(itemtwo.assemblyCode),
                    cockpitAssemblyContentList: this.handleboxmes(itemtwo.cockpitAssemblyContentList)
                  }
                  if (editmestwo.cockpitAssemblyContentList && editmestwo.cockpitAssemblyContentList.length > 0) {
                    editmestwo.dataSources = editmestwo.cockpitAssemblyContentList[0]['dataSources']
                  }
                  console.log('右侧模板业务组件', itemtwo)
                  editmeslisttwo.push(editmestwo)
                  if (this.rightboxmessageone.length - 1 === indextwo) {
                    this.editboxcomsList = editmeslisttwo
                  }
                }
              )
            }
            if (this.nowselctedview === "middle" ||
              this.nowselctedview === "middleTop" ||
              this.nowselctedview === "middleTopBottom") {
              this.centerboxmessageone.forEach(
                (itemtwo, indextwo) => {
                  let centermestwo = {
                    'cockpitAssemblyId': itemtwo.cockpitAssemblyId,
                    'assemblyLong': itemtwo.assemblyLong,
                    frame: itemtwo.frame,
                    dataSources: itemtwo.dataSources,
                    'assemblyHeight': itemtwo.assemblyHeight,
                    'componentsindex': this.getkuangindex(itemtwo.assemblyCode),
                    cockpitAssemblyContentList: this.handleboxmes(itemtwo.cockpitAssemblyContentList)
                  }
                  if (centermestwo.cockpitAssemblyContentList && centermestwo.cockpitAssemblyContentList.length > 0) {
                    centermestwo.dataSources = centermestwo.cockpitAssemblyContentList[0]['dataSources']
                  }
                  console.log('右侧业务组件', itemtwo)
                  editmeslistthree.push(centermestwo)
                  if (this.rightboxmessageone.length - 1 === indextwo) {
                    this.editboxcomsList = editmeslistthree
                  }
                }
              )
            } else if (this.nowselctedview === "middleBottom") {
              this.middleBottomboxmessageone.forEach((itemtwo, indextwo) => {
                let centermestwo = {
                  'cockpitAssemblyId': itemtwo.cockpitAssemblyId,
                  'assemblyLong': itemtwo.assemblyLong,
                  frame: itemtwo.frame,
                  dataSources: itemtwo.dataSources,
                  'assemblyHeight': itemtwo.assemblyHeight,
                  'componentsindex': this.getkuangindex(itemtwo.assemblyCode),
                  cockpitAssemblyContentList: this.handleboxmes(itemtwo.cockpitAssemblyContentList)
                };
                if (centermestwo.cockpitAssemblyContentList && centermestwo.cockpitAssemblyContentList.length > 0) {
                  centermestwo.dataSources = centermestwo.cockpitAssemblyContentList[0]['dataSources']
                }
                console.log("中间下方业务组件", itemtwo);
                editmeslistfour.push(centermestwo);
                if (this.middleBottomboxmessageone.length - 1 === indextwo) {
                  this.editboxcomsList = editmeslistfour;
                }
              });
            }
            // this.getboxmesMet()
          } else {
            this.$message.warning("请选择状态！")
          }
        } else {
          this.diastau = i;
        }
      }
    },
    // 添加一个业务组件
    addcomponentsmet() {
      this.addboxcomsList.push({
        componentsindex: 0,
        assemblyHeight: 33,
        assemblyLong: 100,
        frame: this.frameList[0].id,
        dataSources: this.dataSourcesList[0].id
        // 模板导航栏id
        // cockpitNavigationId: 0,
        // layoutCode: ""
      });
    },
    // 图片选择返回数据
    getFile(event, i) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!"); // 判断图片是否有效
      }
      const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
      // fileReader.readAsDataURL(files[files.length - 1]);
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        if (this.diastau === 1) {
          this.addboxcomsList[i].icon = files[files.length - 1]
        }
        if (this.diastau === 2) {
          this.editboxcomsList[i].icon = files[files.length - 1]
        }
      });
    },
    // 删除一个业务组件
    delcomponentsmet(i) {
      this.addboxcomsList.splice(i, 1);
    },
    // 获取一个所有组件基础信息
    getcomponentsMesList() {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/assembly/queryList'
      axios({
        method: "GET",
        url: requrl,
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        }
      }).then(response => {
        let mes = response.data
        if (mes.code === 1) {
          this.compnentsList = mes.data || []
        } else {
          this.$message.warning("获取业务组件失败！")
        }
      })
    },
    // 通过code获取当前组件的index
    getkuangindex(code) {
      let zhindex = ''
      this.compnentsList.forEach(
        (itemone, index) => {
          if (itemone.assemblyCode === code) {
            zhindex = index
          }
        }
      )
      if (zhindex === '') {
        zhindex = 0
      }
      return zhindex
    },
    // 获取当前大屏的详情
    gettemplemes() {
      let query = this.$route.query;
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpit/queryInfo'
      if (query.organizationMark) {
        axios({
          method: "GET",
          url: requrl,
          headers: {
            organizationMark: query.organizationMark
          }
        }).then(response => {
          let mes = response.data.data
          if (mes) {
            this.cockpitNavigationList = mes.cockpitNavigationList || []
            if (mes.cockpitNavigationList && mes.cockpitNavigationList.length > 0) {
              this.layoutCode =
                this.cockpitNavigationList[this.navindex].layoutCode;
              this.getboxmesMet()
            }
          }
        })
      } else {
        this.$message.warning('请先选模板！')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
.layout-view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .hasdata-view-box {
        position: relative;
        z-index: 2;
        width: 100%;
        // height: 30%;
        overflow-x: hidden;
        overflow-y: auto;
      }
  .layout-view-left {
    width: 300px;
    height: 100%;
    position: relative;
    .hasdata-view{
      position: absolute;
      z-index: 16;
      width:100%;
      height: 100%;
      padding:0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .hasdata-view:hover{
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .layout-view-center {
    width: calc(100% - 620px);
    height: 100%;
    position: relative;
    .hasdata-view{
      position: absolute;
      width:100%;
      height: 100%;
      padding:0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .hasdata-view:hover{
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .layout-view-right {
    width: 300px;
    height: 100%;
    position: relative;
    .hasdata-view{
      position: absolute;
      width:100%;
      height: 100%;
      padding:0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .hasdata-view:hover{
      border: #00faad 1px dashed;
      cursor: pointer;
    }
  }
  .hasdata-view-middleTopBottom {
    height: 30% !important;
  }
  .hasdata-view-middleTop {
    top: 0%;
  }
  .hasdata-view-middleBottom {
    bottom: 0%;
  }
    .hasdata-view-box-edit {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
      }
}
.nolayout-data {
  width: 100%;
  height: 100%;
  border: 1px solid #004c90;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #004c90;
  .zhicon {
    font-size: 30px;
  }
}
.nolayout-data:hover {
  color: aliceblue;
}
.add-components-dia {
  width: 482px;
  // height: 191px;
  background: #303640;
  border: 1px solid #005c6f;
  border-radius: 7px;
  position: fixed;
  top: 15%;
  left: 40%;
  // background-color: #005c6f;
  z-index: 99;
  .top-bar {
    width: 480px;
    height: 10px;
    background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
    border-radius: 7px 7px 0px 0px;
  }
  .top-title-line {
    width: 470px;
    height: 35px;
    line-height: 35px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #484a4e;
    .line-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: $textColor;
      letter-spacing: 2px;
    }
    .line-close {
      color: #10d7c4;
      cursor: pointer;
    }
    .line-close:hover {
      color: $textColor;
    }
  }
  .screen-dia-main {
    width: 482px;
    padding: 20px 10px;
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;

    .dia-main-inputline {
      width: 442px;
      // background-color: #00FAAD;
      display: flex;
      justify-content: center;
      align-items: center;
      .inputline-name {
        width: 104px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: $textColor;
        line-height: 24px;
        text-align: center;
      }
      .inputline-value {
        width: 410px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
      .inputline-valuetwo {
        width: 410px;
        height: 32px;
        line-height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
    }
    .dia-main-addline {
      width: 442px;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: $textColor;
      line-height: 24px;
      border-bottom: #00faad 1px dashed;
      padding-bottom: 16px;
      margin-bottom: 10px;
      .components-line {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        width: 442px;
        height: 48px;
        .slect-name {
          width: 90px;
          height: 36px;
          font-size: 16px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: $textColor;
          line-height: 36px;
          text-align: center;
        }
        .selcect-one {
          width: 350px;
          color: #00faad;
          margin-top: 12px;
          height: 36px;
          line-height: 36px;
          background-color: transparent;
          border: #00faad dashed 1px;
          cursor: pointer;
          option {
            background-color: #005c6f !important;
            color: $textColor;
            cursor: pointer;
          }
        }
      }
      .addline-but {
        width: 442px;
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
        .addline-but1 {
          color: #00faad;
          border: 1px solid #00faad;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but1:hover {
          color: $textColor;
        }
        .addline-but2 {
          color: #3581fb;
          border: 1px solid #3581fb;
          cursor: pointer;
          padding: 5px 10px;
        }
        .addline-but2:hover {
          color: $textColor;
        }
      }
    }
    .dia-main-addline:last-of-type {
      padding-bottom: 0;
      margin: 0;
      border: none;
    }
    .showkuang-one {
      position: relative;
      left: 20px;
      width: 420px;
      height: 400px;
      .kuangone-main {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom-bar {
    width: 482px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    .bottom-bar-cancel {
      width: 96px;
      height: 33px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #0cb9ae;
      color: #0cb9ae;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-cancel:hover {
      color: #00faad;
    }
    .bottom-bar-confirm {
      width: 96px;
      height: 33px;
      background: #0cb9ae;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-confirm:hover {
      color: #10fab4;
    }
  }
}
</style>
